import React, { useState, useEffect, useRef } from 'react'
import './index.css'
import * as echarts from 'echarts';
import chinaJson from '../../json/china.json'
import axios from 'axios';
import { getMap } from '../../request/index'
function Map() {
  const refbox=useRef(null);
  console.log('refbox',refbox)
  let shuju=[
    {
      adcode:100000,
      name:'中国'
    }
  ]
 
  const render=(adcode,name)=>{
    getMap(adcode).then(res=>{
      console.log('res地图',res);
      let mapData=res.data
      // res.data.features       properties
      //注册地图     
      echarts.registerMap(name, mapData);
       //初始化地图
      var myChart = echarts.init(refbox.current);
      let option={
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name:name,
            type: 'map',
            map:name,
            // label: {
            //   show: true
            // },
            data:res.data.features.map((item)=>{
              return {
                name:item.properties.name,
                value:item.properties.childrenNum,
                adcode:item.properties.adcode
              }
            })
          }
        ]
      }
 
      myChart.setOption(option)
      //点击下钻
      myChart.off('click',onclick);
      myChart.off('contextmenu',oncontextmenu)
      myChart.on('click',function(e){
        let {adcode,name}=e.data;
        console.log(adcode,name);
        render(adcode,name)
      })
      //
     
      myChart.on('contextmenu',function(e){
        console.log('返回',e)
        shuju.pop();
        let {adcode,name}=shuju[shuju.length-1]
        render(adcode,name)
      })
    })
  }
  useEffect(()=>{
    render(100000,'中国')
  },[])
  return (
    <div className='ditu' ref={refbox}>

    </div>
  )
}

export default Map
